<template>
  <view>
    <view class="content">
      <view class="title">维修报告</view>
      <view class="course">
        <view class="report-list" v-for="(item, index) in report.details" :key="index">
          <view class="item">{{ item.content }}</view>
          <view class="item">{{ item.createTime[0] }}/{{ item.createTime[1] }}/{{ item.createTime[2] }}/{{ item.createTime[3] }}:{{ item.createTime[4] }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config.js';
export default {
  data() {
    return {
      report: [],
      token: ''
    };
  },
  onLoad(option) {
    this.token = uni.getStorageSync('token');
    let that = this;
    console.log(option.reportId, 'reportId');
    uni.request({
      url: `${config.baseURL}/order/id/${option.reportId}`,
      header: {
        token: this.token
      },
      success(res) {
        console.log(res);
        // console.log(res.data.data)
        if (!res.data.data) {
          uni.showToast({
            title: res.data.message,
            icon: 'error'
          });
          return;
        }
        that.report = res.data.data;
        console.log(that.report, 'res');
      }
    });
  }
};
</script>

<style lang="scss">
page {
  background-color: #333333;
}

.content {
  background: rgb(79, 79, 79);
  margin: 15px 5px 0px;
  display: flex;
  flex-direction: column;
  border-radius: 30rpx;
  border-left: 4rpx solid #ffb612;
  border-right: 4rpx solid #ffb612;
  padding: 10px;

  .course {
    margin-top: -10px;
    margin-left: 30px;
    .report-list {
      color: rgb(205, 205, 205);
      display: flex;
      flex-direction: column;
      padding: 12px 20px;
      position: relative;
      .item {
        padding: 3px 0;
      }
    }

    .report-list::before {
      position: absolute;
      content: '';
      display: block;
      border-left: 4px solid #cdcdcd;
      height: 100px;
      left: -5px;
      bottom: -42px;
    }
    .report-list:last-of-type::before {
      border-left: none;
    }

    .report-list::after {
      position: absolute;
      content: '';
      display: block;
      border: 3px solid #cdcdcd;
      height: 5px;
      width: 5px;
      border-radius: 50%;
      background: #cdcdcd;
      left: -8px;
      top: 18px;
    }
  }
  .title {
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
